import React, { createRef } from "react";
import './App.css'
import avatar from './images/avatar.png';
import {http} from './utils'
class Demo extends React.Component {

  state = {
    // hot: 热度排序  time: 时间排序
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot',
      },
      {
        id: 2,
        name: '时间',
        type: 'time',
      },
    ],
    active: 'hot',
    list: [
      // {
      //   id: 1,
      //   author: '刘德华',
      //   comment: '给我一杯忘情水',
      //   time: new Date('2021-10-10 09:08:00'),
      //   // 1: 点赞 0：无态度 -1:踩
      //   attitude: 1,
      // },
      // {
      //   id: 2,
      //   author: '周杰伦',
      //   comment: '哎哟，不错哦',
      //   time: new Date('2021-10-11 09:09:00'),
      //   // 1: 点赞 0：无态度 -1:踩
      //   attitude: 0,
      // },
      // {
      //   id: 3,
      //   author: '五月天',
      //   comment: '不打扰，是我的温柔',
      //   time: new Date('2021-10-11 10:09:00'),
      //   // 1: 点赞 0：无态度 -1:踩
      //   attitude: -1,
      // },
    ],
    txt: ''
  };
  txtRef = createRef()
  handleTxt=(e) => {
    this.setState({
      txt: e.target.value
    })
  }
// 添加评论
  submitBtn = async() => {
    // 获取值
    // console.log(this.txtRef.current.value);
    // const comment = {
    //   id: +new Date(),
    //   author: '刘德华',
    //   comment: this.state.txt,
    //   time: new Date('2021-10-10 09:09:00'),
    //   // 1: 点赞 0：无态度 -1:踩
    //   attitude: 0
    // }
    // this.setState({
    //   list:  [comment, ...this.state.list],
    //   txt: ''
    // })
    // 模拟提交数据到服务器
    await http.post('/list', {
      // id: +new Date(),
        author: '刘德华',
        comment: this.state.txt,
        time: new Date('2021-10-10 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0
    })  

    const res = await http.get('/list')
    console.log(res);
    this.setState({
      list: res.data
    })


    this.txtRef.current.focus()
  }
// 删除评论
 delBtn = async(index,id) => {
  // 模拟请求删除数据
  await http.delete(`/list/${id}`)
  const res = await http.get('/list')
  this.setState({
    list: res.data
  })

  //  console.log(index);

  // let list = this.state.list
  // list.splice(index,1)

  // this.setState({
  //   // list: this.state.list.splice(index,1)
  //   list:list
  // })
 }
 // 修改点赞状态
 changeAttitud =(id,attitude) => {
  console.log(id,attitude);
  const newList = this.state.list.map(item => {
    // 找到点赞或踩的评论
    if(item.id === id) {
      return {
        ...item,
        attitude
      }
    } 
    return item
  })
  this.setState({
    list: newList
  })
 }
 
 changeSortType =(type) =>{
  console.log(type);
  if (type === 'hot') {
    this.setState({
      list: [...this.state.list.sort((a, b) => b.id - a.id)],
    });
  } else {
    this.setState({
      list: [
        ...this.state.list.sort(
          (a, b) => a.time.getTime() - b.time.getTime()
        ),
      ],
    });
  }

  this.setState({
    active: type,
  });
 }

 // 发起网络请求 获取评论列表
 async componentDidMount() {
  const res = await http.get('/list')
  console.log(res);
  this.setState({
    list: res.data
  })
 }

  // 页面结构
  render() {
    return (
    <div className="comment-root">
      <div className="comment-container">
        {/* 评论数 */}
        <div className="comment-number">
          <span>{this.state.list.length} 评论</span>
        </div>
  
        {/* 排序tab */}
        <div className="tabs-order">
          {this.state.tabs.map(item => (
          <div 
          className={item.type === this.state.active ? 'on' : ''}
           key={item.id} onClick={ ()=> this.changeSortType(item.type) }
           >按{item.name}排序</div>
          ))}
          {/* <div>按{this.state.tabs[1].name}排序</div> */}
        </div>
  
        {/* 发表评论区 */}
        <div className="comment-send-container">
          <div>
            <img className="user-head" src={avatar} alt="头像" />
          </div>
          <div className="comment-send">
            <div className="textarea-container">
              <textarea
                cols="80"
                rows="5"
                placeholder="发条友善的评论"
                className="ipt-txt"
                value={this.state.txt}
                onChange={this.handleTxt}
                ref={this.txtRef}
              />
              <button className="comment-submit" onClick={this.submitBtn}>发表评论</button>
            </div>
            <div className="comment-emoji">
              <i className="face"></i>
              <span className="text">表情</span>
            </div>
          </div>
        </div>
  
        {/* 评论列表区 */}
        <div className="comment-list">
          {this.state.list.map((item,index) => {
           return (          
          <div className="comment-item" key={item.id}>
            <div>
              <img className="user-head" src={avatar} alt="头像" />
            </div>
  
            <div className="comment">
              <div className="user">{item.author}</div>
              <p className="text">{item.comment}</p>
              <div className="info">
                {/* <span className="time">{item.time.toLocaleDateString() +
                        '/' +
                        item.time.toLocaleTimeString()}</span> */}

                  <span className="time">{item.time}</span>  

                <span className={item.attitude === 1 ?"like liked" : "like"}>
                  <i className="icon" onClick={()=> this.changeAttitud(item.id, item.attitude === 1 ? 0:1)} />
                </span>
                <span className={item.attitude === -1 ?"hate hated" : "hate"}>
                  <i className="icon" onClick={()=> this.changeAttitud(item.id, item.attitude === -1 ? 0:-1)} />
                </span>
                <span className="btn-hover" onClick={()=>this.delBtn(index,item.id)}>删除{index}</span>
              </div>
            </div>
          </div>
            )
          })}
        </div>
      </div>
    </div>
    )
  }
}
export default Demo
